<template>
	<view class="home">
		<image class="banner" :src="dataInfo.image" mode="widthFix"></image>
		<view class="content">
			<down-time :times="times"></down-time>
			<view class="search_box">
				<view class="inp">
					<image src="/static/images/vote/sousuo.png" mode="aspectFill"></image>
					<input v-model="params.keywords" type="text" placeholder="请输入编号或姓名"/>
				</view>
				<button type="default" @click="onSearch">搜索</button>
			</view>
			<view class="list">
				<!-- <view v-for="(item,index) in list" :key="index" class="item">
					<rich-text :nodes="item.content"></rich-text>
					<view class="flexbox">
					    <image v-if="item.image_input.length" class="cover" :src="item.image_input[0]" mode="aspectFill"></image>
					    <text class="name">作者：{{item.author || '--'}}</text>
					</view>
				</view> -->
				
				<custom-waterfalls-flow
				v-if="list.length" 
				:value="list" 
				@wapperClick="gotoDetail"
				@imageClick="gotoDetail"
				:listStyle="{padding: '16rpx',boxShadow: '0 0 20rpx rgba(0,0,0,.05)', boxSizing: 'border-box',borderRadius: '32rpx'}">
				<template v-slot:default="item">
				    <view class="flexbox">
				        <!-- <image v-if="item.image_input.length" class="cover" :src="item.image_input[0]" mode="aspectFill"></image> -->
				        <text class="name">作者：{{item.author || '--'}}</text>
				    </view>
				</template>
				</custom-waterfalls-flow>
			</view>
		</view>
		<rich-text :nodes="dataInfo.content"></rich-text>
		<!-- <prize></prize> -->
		<tab-bar :current="0"></tab-bar>
	</view>
</template>

<script>
	// import prize from './components/prize';
	import downTime from './components/downTime';
	import tabBar from './components/tabbar';
	import {getCategoryList,getUserList} from '@/api/vote';
	export default {
		components: {
			// prize,
			downTime,
			tabBar
		},
		data() {
			return {
				list: [],
				dataInfo: '',
				params: {
					keywords: '',
					page: 1,
					limit: 12,
					cid: ''
				},
				times: 0,
				finished: false
			};
		},
		onShow() {
			this.getCategoryList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			onSearch() {
				this.params.page = 1;
				this.list = [];
				this.finished = false;
				this.getList();
			},
			getCategoryList() {
				getCategoryList().then(res => {
					if(res.data.length) {
						let now = Math.floor(new Date().getTime() / 1000);
						this.dataInfo = res.data[0];
						this.times = this.dataInfo.end_time;
						this.params.cid = this.dataInfo.id;
						uni.setNavigationBarTitle({
							title: this.dataInfo.title
						})
						this.getList();
					}
				})
			},
			getList() {
				if(this.finished) return;
				getUserList(this.params).then(res => {
					res.data && res.data.map(item => {
						if(item.image_input.length) {
							item.image = item.image_input[0];
						}
					})
					this.list = this.params.page > 1 ? [...this.list,...res.data] : res.data;
					this.params.page += 1;
					this.finished = res.data.length < this.params.limit;
				})
			},
			gotoDetail(item) {
				uni.navigateTo({
					url: `/pages/vote/vote?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.home {
	background-color: #f5f5f5;
	padding: 0 0 100rpx;
	.banner {
		width: 100%;
		height: 500rpx;
	}
	.content {padding: 20rpx 32rpx;}
	.search_box {
		display: flex;
		align-items: center;
		margin: 0 0 24rpx;
		.inp {
			border: 2rpx solid #e57511;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			flex: 1;
			padding: 0 24rpx;
			image {
				width: 30rpx;
				height: 30rpx;
			}
			input {
				padding-left: 24rpx;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 32rpx;
			}
		}
		button {
			margin-left: 30rpx;
			background-color: #e57511;
			color: #fff;
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 32rpx;
		}
	}
	.flexbox {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}
	.cover {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.name {
		font-size: 28rpx;
		color: #3c3c3c;
	}
}
</style>
